Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
react-tween-state
Advanced tools
The equivalent of React's this.setState
, but for animated tweens: this.tweenState
.
Npm:
npm install react-tween-state
Bower:
bower install react-tween-state
Example usage:
var tweenState = require('react-tween-state');
var React = require('react');
var App = React.createClass({
mixins: [tweenState.Mixin],
getInitialState: function() {
return {left: 0};
},
handleClick: function() {
this.tweenState('left', {
easing: tweenState.easingTypes.easeInOutQuad,
duration: 500,
endValue: this.state.left === 0 ? 400 : 0
});
},
render: function() {
var style = {
position: 'absolute',
width: 50,
height: 50,
backgroundColor: 'lightblue',
left: this.getTweeningValue('left')
};
return <div style={style} onClick={this.handleClick} />;
}
});
The library exports Mixin
, easingTypes
and stackBehavior
.
this.tweenState(path: String | Array<String>, configuration: Object)
This first calls setState
and puts your fields straight to their final value. Under the hood, it creates a layer that interpolates from the old value to the new. You can retrieve that tweening value using getTweeningValue
below.
path
is the name of the state field you want to tween. If it's deeply nested, e.g. to animate c
in {a: {b: {c: 1}}}, provide the path as ['a', 'b', 'c']
configuration
is of the following format:
{
easing: easingFunction,
duration: timeInMilliseconds,
delay: timeInMilliseconds,
beginValue: aNumber,
endValue: aNumber,
onEnd: endCallback,
stackBehavior: behaviorOption
}
easing
(default: easingTypes.easeInOutQuad
): the interpolation function used. react-tween-state provides frequently used interpolation (exposed under easingTypes
). To plug in your own, the function signature is: (currentTime: Number, beginValue: Number, endValue: Number, totalDuration: Number): Number
.duration
(default: 300
).delay
(default: 0
). *beginValue
(default: the current value of the state field).endValue
.onEnd
: the callback to trigger when the animation's done. **stackBehavior
(default: stackBehavior.ADDITIVE
). Subsequent tween to the same state value will be stacked (added together). This gives a smooth tween effect that is iOS 8's new default. This blog post describes it well. The other option is stackBehavior.DESTRUCTIVE
, which replaces all current animations of that state value by this new one.* For a destructive animation, starting the next one with a delay still immediately kills the previous tween. If that's not your intention, try setTimeout
or additive animation. DESTRUCTIVE
+ duration
0 effectively cancels all in-flight animations, skipping the easing function.
** For an additive animation, since the tweens stack and never get destroyed, the end callback is effectively fired at the end of duration
.
this.getTweeningValue(path: String | Array<String>)
Get the current tweening value of the state field. Typically used in render
.
BSD.
FAQs
React animation.
The npm package react-tween-state receives a total of 29,930 weekly downloads. As such, react-tween-state popularity was classified as popular.
We found that react-tween-state demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.